<template>
	<view class="{{ cellClass }}" style="{{ customStyle }}" bind:tap="onClick">
		<uni-icon wx:if="{{ icon }}" name="{{ icon }}" class="color-cell__left-icon-wrap" custom-class="color-cell__left-icon" />
		<slot wx:else name="icon" />

		<view style="{{ titleStyle }}" class="color-cell__title title-class">
			<block wx:if="{{ title }}">
				{{ title }}
				<view wx:if="{{ label }}" class="color-cell__label label-class">{{ label }}</view>
			</block>
			<slot wx:else name="title" />
		</view>

		<view class="color-cell__value value-class">
			<block wx:if="{{ value }}">{{ value }}</block>
			<slot wx:else />
		</view>

		<uni-icon wx:if="{{ isLink }}" name="arrow" class="color-cell__right-icon-wrap" custom-class="color-cell__right-icon" />
		<slot wx:else name="right-icon" />

		<slot name="extra" />
	</view>
</template>

<script>
	import {uniIcon} from '../uni-icon.vue';
	export default {
		name: "colorCell",
		component: {
			uniICon
		},
		classes: ['title-class', 'label-class', 'value-class'],
		mixins: [link],
		props: {
			title: null,
			value: null,
			icon: String,
			label: String,
			center: Boolean,
			isLink: Boolean,
			required: Boolean,
			clickable: Boolean,
			titleWidth: String,
			customStyle: String,
			border: {
				type: Boolean,
				value: true
			}
		},
		computed: {
			cellClass: function cellClass() {
				var data = this.data;
				return this.classNames('custom-class', 'color-cell', {
					'color-cell--center': data.center,
					'color-cell--required': data.required,
					'color-cell--borderless': !data.border,
					'color-cell--clickable': data.isLink || data.clickable
				});
			},
			titleStyle: function titleStyle() {
				var titleWidth = this.data.titleWidth;
				return titleWidth ? "max-width: " + titleWidth + ";min-width: " + titleWidth : '';
			}
		},
		methods: {
			onClick: function onClick(event) {
				this.$emit('click', event.detail);
				this.jumpLink();
			}
		}
	}
</script>

<style>
	.uni-cell {
		width: 100%;
		display: flex;
		padding: 10upx 15upx;
		box-sizing: border-box;
		line-height: 24upx;
		position: relative;
		background-color: #fff;
		color: #333;
		font-size: 14upx
	}

	.color-cell::after {
		content: ' ';
		position: absolute;
		pointer-events: none;
		box-sizing: border-box;
		transform-origin: center;
		top: auto;
		left: 15upx;
		right: 0;
		bottom: 0;
		transform: scaleY(.5);
		border-bottom: 1upx solid #eee
	}

	.color-cell--borderless::after {
		display: none
	}

	.color-cell-group {
		background-color: #fff
	}

	.color-cell__label {
		font-size: 12upx;
		line-height: 1.2;
		color: #666
	}

	.color-cell__title,
	.color-cell__value {
		flex: 1
	}

	.color-cell__title:empty,
	.color-cell__value:empty {
		display: none
	}

	.color-cell__value {
		overflow: hidden;
		text-align: right;
		vertical-align: middle
	}

	.color-cell__left-icon-wrap,
	.color-cell__right-icon-wrap {
		display: flex;
		align-items: center;
		height: 24upx
	}

	.color-cell__left-icon {
		font-size: 16upx !important;
		line-height: 24upx;
		margin-right: 5upx;
		vertical-align: middle
	}

	.color-cell__right-icon {
		color: #999;
		font-size: 12upx !important;
		line-height: 24upx;
		margin-left: 5upx
	}

	.color-cell--clickable:active {
		background-color: #e8e8e8
	}

	.color-cell--required {
		overflow: visible
	}

	.color-cell--required::before {
		content: '*';
		position: absolute;
		left: 7upx;
		font-size: 14upx;
		color: #f44
	}

	.color-cell--center {
		align-items: center
	}
</style>
